<template>
  <div>
    <div class="Herd_Color"></div>
    <div class="From_Title">生产检测</div>
    <br />
    <p class="Purchase_Division"></p>
    <br />
    <el-form :model="formInline" :inline="true" label-width="130px">
      <el-form-item label="产品名称">
        <el-input v-model="formInline.a"></el-input>
      </el-form-item>
      <el-form-item label="产品类型">
        <el-input v-model="formInline.a"></el-input>
      </el-form-item>
      <el-form-item label="生产数量">
        <el-input v-model="formInline.a"></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-input v-model="formInline.a"></el-input>
      </el-form-item>
    </el-form>
    <br />
    <div class="From_Title">检测标准</div>
    <br />
    <el-table :data="tableData" :height="400" :max-height="350" stripe>
      <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
      <el-table-column prop="productname" label="检测项目及技术要求" align="center"></el-table-column>
      <el-table-column prop="productname" label="检测数量" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.a"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="productname" label="检测记录" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.a"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="productname" label="判定" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.a"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="productname" label="处理结果" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.a"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="Mwei_Dtel">
      <el-form :model="formInline" :inline="true" label-width="160px">
        <el-form-item label=" 上传检测报告">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
      </el-form>
      <div class="Jian_CeYuan">
        <el-form :model="formInline" :inline="true" label-width="160px">
          <el-form-item label="检测员">
            <el-input v-model="formInline.a"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="Bottom_Btn">
        <el-button size="medium" type="primary" @click="Cancel">确认</el-button>
        <el-button size="medium" type="info" @click="Cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    fatherMethod: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false,
      formInline: {},
      tableData: [{}],
      //上传图片
      dialogImageUrl: ""
    };
  },
  methods: {
    Cancel() {
      if (this.fatherMethod) {
        this.fatherMethod();
      }
    },
    //上传------图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
.Herd_Color {
  margin-top: -30px;
  height: 25px;
  width: 5px;
  background-color: blue;
}
.From_Title {
  margin-top: -22px;
  margin-left: 10px;
}
.Tiao_Btn {
  margin-top: 30px;
  text-align: center;
}
.Purchase_Division {
  border: 0.5px solid rgb(211, 208, 208);
}
.Mwei_Dtel {
  margin-top: 20px;
}
.Jian_CeYuan {
  margin-left: 40%;
  margin-top: -70px;
}
.Bottom_Btn {
  margin-top: 30px;
  text-align: center;
}
</style>